<template>
    <div class="outdiv">
        <cli-title class="titleClass" :pageIndex="pageIndex"></cli-title>
        <cli-menu class = "meunClass" :acIndex="acIndex" :cameraId="cameraId"></cli-menu>
        <el-card class = "class-tp">
            <temperature ></temperature>
        </el-card>
        <el-card class = "class-tp">
            <wind></wind>
        </el-card>
        <el-card class = class-rain>
            <rain></rain>
        </el-card>


    </div>
</template>

<script>
    import cliTitle from '~/components/base/cliTitle.vue'
    import CliMenu from "../../../components/base/cliMenu";
    import Temperature from "../../../components/camera/weather/temperature";
    import Rain from "../../../components/camera/weather/rain";
    import Wind from "../../../components/camera/weather/wind";
    export default {
        name: "weather",
        components: {Wind, Rain, Temperature, CliMenu, cliTitle},
        data(){
            return{
                pageIndex:'2',
                acIndex:'1',
                cameraId:'',
            }
        },
        mounted() {
            this.cameraId = this.$route.params.cameraId;
        }
    }
</script>

<style scoped>
    .outdiv{
        min-width: 1000px;
        overflow: hidden;
        height: 100%;
        overflow-y: auto;

    }
    .titleClass{
        position: fixed;
        z-index: 1;
    }

    .meunClass{
        /*display: none;*/
        float: left;
        margin-top: 50px;
    }
    .class-tp{
        float: left;
        margin-top: 50px;
        margin-left: 30px;
        width: 45%;
        height: 350px;
    }
    .class-rain{
        float: left;
        margin-top: 30px;
        margin-left: 100px;
        margin-bottom: 50px;
        width: 90%;
        height: 450px;
    }

</style>